<template>
  <!-- 优质商家  展示 -->
  <div style="padding-bottom: 30px;">
    <!-- <div style="color: green;" v-if="shopInfo.isQuality==2">已成为优质商家</div>
    <el-button v-else @click="openYouzhi">成为优质商家</el-button> -->

    <div class="top-box flex">
      <div class="top-left">
        <div class="tit">
          优质商家
        </div>
        <div class="tit2">
          货源四大优势 <i class="el-icon-d-arrow-right"></i>
        </div>
        <div style="color: #6373A5;font-size: 18px;font-weight: 600;line-height: 1.5em;margin-top: 10px;">
          商家已在平台缴纳保证金<br/>
          如有违规平台可优先赔付。
        </div>
        <div>
          <b style="font-size: 24px;">
            今日已提号:
          </b>
          <span class="rili"> 
            {{ todayOrderNum }}
          </span>
          <span>单</span>
        </div>

      </div>
      <div class="top-rg flex">
        <div class="carditem-box" v-for="(item,i) in cardsList" :key="i">
          <div class="carditem">
            <div class="flex card-top">
              <img :src="item.icon" alt="">
              <div class="tit">
                {{ item.name }}
              </div>
            </div>
            <div class="des">
              {{ item.des }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tongji flex">
      <div class="order_money card">
        <div >
          <subtit title="优质商家交易额统计">
            <div class="flex">
              <div class="select flex">
                <div class="day1" @click="orderMoneyData.type=3;getOrderData(3,'money')" :class="{active:orderMoneyData.type===3}">年</div>
                <div class="day2" @click="orderMoneyData.type=2;getOrderData(2,'money')" :class="{active:orderMoneyData.type===2}">月</div>
                <div class="day3" @click="orderMoneyData.type=1;getOrderData(1,'money')" :class="{active:orderMoneyData.type===1}">周</div>
                
              </div>
              <div class="zong" style="margin-left: 10px;">
                总额:<b style="color: #6C5DD3;font-size: 16px;">{{ orderMoneyData.total }}</b>
              </div>
            </div>
          </subtit>
        </div>
        <orderByMoney :dataList="orderMoneyData.data" @getTotal="getTotalMoney" ></orderByMoney>
      </div>
      <div class="order_money card">
        <div >
          <subtit title="优质商家交易量统计">
            <div class="flex">
              <div class="select flex">
                <div class="day1" @click="orderNumData.type=3;getOrderData(3,'num')" :class="{active:orderNumData.type===3}">年</div>
                <div class="day2" @click="orderNumData.type=2;getOrderData(2,'num')" :class="{active:orderNumData.type===2}">月</div>
                <div class="day3" @click="orderNumData.type=1;getOrderData(1,'num')" :class="{active:orderNumData.type===1}">周</div>
              </div>
              <div class="zong" style="margin-left: 10px;">
                总量:<b style="color: #6C5DD3;font-size: 16px;">{{ orderNumData.total }}</b>
              </div>
            </div>
          </subtit>
        </div>
        <orderByNum :dataList="orderNumData.data" @getTotal="getTotalNum"></orderByNum>
      </div>
    </div>
    <div class="youzhi-list card">
        <div >
          <subtit title="优质商家排行榜">
           <div class="flex" style="margin-left: 20px;">
            <div class="yousign" v-if="shopInfo&&shopInfo.isQuality==2" style="margin-right: 15px;">
              <youzhiName :name="'优质商家'"></youzhiName>
            </div>
              <el-button @click="openYouzhi" type="primary" size="mini" v-else>
                <span>
                  <i class="btnicon"></i>
                  <span style="display: inline-block;vertical-align: middle;">成为优质商家</span>
                </span>
              </el-button>
              <el-button type="primary" size="mini" @click="goLink('/tenantOrders/zyscShangpin?retailKey=zysc')">
                <span>
                  <i class="btnicon gouxuan"></i>
                  <span style="display: inline-block;vertical-align: middle;">去勾选</span>
                </span>
              </el-button>
           </div>
          </subtit>
        </div>
        <div class="lunbo_box">
          <div class="flex youzhi_box" v-if="paihangList&&paihangList.length">
            <div v-for="(item,i) in paihangList" :key="i" class="item" :style="{backgroundColor:bgColors[i%10]}">
              <div class="touxiang">
                <img :src="item.avatar" alt="">
              </div>
              <div class="name">{{item.tenantName}}</div>

              <!-- <div class="sign">

              </div> -->
            </div>
          </div>
          <div v-else style="font-size:26px;text-align:center;line-height:170px;color:#999">
            暂无商家
          </div>
          <!-- <el-carousel indicator-position="none" height="264px">
            <el-carousel-item v-for="item in lunboList" :key="item.id">
              <img @click="goLink(item.pcJump)" :src="item.imgUrl" alt="" style="width:100%;height:100%;cursor: pointer;">
            </el-carousel-item>
          </el-carousel> -->
        </div>
        
      </div>

    <payBZJ @next="nextFn('3')" ref="payBZJ"></payBZJ>
    <authDialog @next="nextFn('2')" ref="authDialog"></authDialog>
    <joinYouzhi @next="nextFn('1')" ref="joinYouzhi"></joinYouzhi>
    <userInfoSure @next="nextFn('4')" ref="userInfoSure"></userInfoSure>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import formSubTitVue from "@/views/tenantPages/components/formSubTit.vue";
import payBZJ from "@/views/tenantPages/moneys/components/payBZJ.vue";
import BZJmingxi from "@/views/tenantPages/moneys/components/BZJmingxi";
import tixian from "@/views/tenantPages/moneys/components/tixian.vue";
import userInfoSure from "@/views/tenantPages/components/userInfoSure";
import authDialog from "../shopManage/shopCenter/authDialog.vue";
import joinYouzhi from "./joinYouzhi.vue";

import subtit from "@/components/indexComponents/subtit.vue";

import orderByMoney from "./components/orderByMoney.vue";
import orderByNum from "./components/orderByNum.vue";

import { cwyzsj } from "../../../api/system/shopManage";

import {
  getPaihang,
} from "@/api/tenantApis/indexStatistics.js";
import { merchantStatisticsYzsj,merchantStatisticsYzsjdan } from "../../../api/youzhishangjia";

export default {
  name: "Youzhishangjia",
  components: {
    formSubTitVue,
    payBZJ,
    BZJmingxi,
    tixian,
    userInfoSure,
    authDialog,
    joinYouzhi,
    subtit,
    orderByMoney,
    orderByNum,
  },
  data() {
    return {
      bgColors: [
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
        "#CFC8FF",
        "#FFE3F2",
        "#FFE2AC",
        "#B7EFFF",
        "#FFCEBF",
      ],
      isEditName: false,
      isEditInfo: false,
      form: {
        realName: "",
      },
      uploadImgUrl: "",
      rules: {
        // realName: [
        //     { required: true, message: '请输入姓名', trigger: 'blur' }
        //   ],
      },
      BZJmoney: 1000,
      cardsList: [
        {
          name:'无货赔付',
          icon:require('../../../assets/img/youzhishangjia/a.png'),
          des:'因为商品问题导致的交易失败，包括但不限于未及时下架，找回，封禁，账号冻结等，将对分销商进行补偿最低20元最高50元的赔偿。'
        },
        {
          name:'合同已签署',
          icon:require('../../../assets/img/youzhishangjia/b.png'),
          des:'商家与虞都互联平台签署供货协议，如后续出现跑路，等问题虞都互联可帮助商家进行起诉索赔。'
        },
        {
          name:'极速售后',
          icon:require('../../../assets/img/youzhishangjia/c.png'),
          des:'如出现找回问题，7日之内未处理完成商家赔付号款，超时一天将处罚10元赔付给买家，最高累计7日。14日内无法处理平台强制退款。'
        },
        {
          name:'价格优势',
          icon:require('../../../assets/img/youzhishangjia/d.png'),
          des:'优质商家供货货源保证是全网最低商品价格，如发现高于其他平台价格举报可获得一百元奖励'
        },
      ],
      todayOrderNum:0,
      orderMoneyData:{
        type:1,
        total:0,
        data:[]
      },
      orderNumData:{
        type:1,
        total:0,
        data:[]
      },

      paihangList:[]
    };
  },
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },

  created() {
    this.getTodayNum()
    this.getOrderData()
    this.getPaihangList()
    this.getBZJ();
    this.$store.dispatch("getShopInfo");
  },
  methods: {
     // 跳转链接
     goLink(val) {
      if (val.indexOf("http") > -1) {
        window.open(val, "_blank");
      } else {
        this.$router.push({
          path: val,
        });
      }
    },

    // 签署入驻合同
    signFdd(){
      this.$refs.userInfoSure.open()
    },


    // 获取今日提号数量
    getTodayNum(){
      merchantStatisticsYzsjdan().then(res=>{
        console.log("%c Line:246 🍡 res", "color:#e41a6a", res);
        this.todayOrderNum = res.data||0
        if(this.todayOrderNum>99) this.todayOrderNum='99+'
      })
    },
    // 获取商家交易额统计
    getOrderData(type=1,flag){
      merchantStatisticsYzsj({type:type}).then(res=>{
        if(res.data&&res.data.length){
          if(flag=='money'){
            this.orderMoneyData.data = [...res.data]
          }else if(flag=='num'){
            this.orderNumData.data = [...res.data]
          }else{
            this.orderMoneyData.data = [...res.data]
            this.orderNumData.data = [...res.data]
          }
        }

      })


    },
    // 
    getTotalMoney(e){
      this.orderMoneyData.total = e
    },
    getTotalNum(e){
      this.orderNumData.total = e
    },
    // 商家排行
    getPaihangList() {
      getPaihang().then((res) => {
        this.paihangList = res.data;
       
      });
    },
    // 成为优质商家
    openYouzhi() {
      if(!this.shopInfo){
        return this.$message.error('管理员不能使用该功能！')
      }
      this.$refs.joinYouzhi.open();
    },
    nextFn(step) {
      if(step!=1){
        const loading = this.$loading('请稍后...')
        setTimeout(()=>{
          this.checkTiaojianFn()
          loading.close()
        },1000)
      }else{
        this.checkTiaojianFn()
      }
      
    },
    checkTiaojianFn() {
      // 店铺实名  缴纳保证金 合同？
      if (
        this.shopInfo.authType &&
        (this.shopInfo.authType == 2 || this.shopInfo.authType == 3||this.shopInfo.authType==6)
      ) {
        // 已认证
        // 判断保证金
        if (this.shopInfo.marginState && this.shopInfo.marginState == 2) {
          // 已缴纳保证金
          if (this.shopInfo.marginMoney == this.BZJmoney) {
            // 保证金正常  
            // 调用接口成为优质商家
            cwyzsj({
                tenantId:this.shopInfo.tenantId
              }).then(res=>{
                if(res.code==200){
                  this.$message.success('已成为优质商家')
                  this.$store.dispatch("getShopInfo")
                }else{
                  this.$message.error(res.msg)
                }
              }).catch(err=>{
                this.$message.error(err.msg)
              })
           
          } else {
            //保证金不足， 弹出缴纳保证金
            
            this.$alert("保证金不足，请缴纳保证金后再申请优质商家！");
            this.openPayBZJ();
          }
        } else {
          // 未缴纳保证金 弹出缴纳保证金
          
          this.$alert("未缴纳保证金，请缴纳保证金后再申请优质商家！");
          this.openPayBZJ();
        }
      } else {
        // 打开认证弹窗
        this.$alert("未实名认证，请先进行实名认证！");

        this.$refs.authDialog.open("joinYouzhi");
        // this.$message.error('未实名认证，请先进行实名认证！')
      }
    },
    // 获取保证金金额
    getBZJ() {
      this.getDicts("marginMoney").then((res) => {
        //console.log("%c Line:271 🥕 res", "color:#42b983", res);
        if (res.data && res.data.length) {
          this.BZJmoney = res.data[0].dictValue;
         
        }
      });
    },
    // 打开缴纳保证金的窗口
    openPayBZJ() {
      const money =
        Math.round((this.BZJmoney - this.shopInfo.marginMoney) * 100) / 100;
      this.$refs.payBZJ.open(money, this.BZJmoney || 0,"joinYouzhi");
    },

  },
};
</script>

<style scoped lang="scss">
.top-box{
  width: 1272px;
  height: 288px;
  padding-left: 90px;
  background-image: url('../../../assets/img/youzhishangjia/topbg.png');
  background-size: 100% 100%;
  .top-left{
    width: 222px;
    flex-shrink: 0;
    padding-top: 30px;
    .tit,.tit2{
      color: #323C5A;
      font-size: 24px;
      line-height: 40px;
    }

    .rili{
      margin-top: 10px;
      display: inline-block;
      width: 48px;
      height: 52px;
      background-image: url('../../../assets/img/youzhishangjia/rili.png');
      background-size:100% 100% ;
      color: #6C5DD3;
      font-size: 24px;
      text-align: center;
      padding-top: 17px;
      margin-right: 5px;
    }
  }

  .top-rg{
    padding-left: 260px;
    .carditem-box{
      .des{
        color: #525B72;
        line-height: 20px;
        padding:5px 15px;
        padding-top: 15px;
      }
      
      
      &:not(&:first-child){
        padding-top: 18px;
        padding: 18px 10px;
        .carditem{
          height: 227px;
          width: 170px;
          background-color: #fff;
          border-radius: 10px;
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          padding: 20px 0;
        }
      }
      
      &:first-child{
        width: 1px;
        
        position: relative;
        
          
        .carditem{
          width: 312px;
          height: 387px;
          background-image: url('../../../assets/img/youzhishangjia/youshibg.png');
          background-size: 100% 100%;
          position: absolute;
          top: -36px;
          left: -255px;
          padding: 83px;
          padding-top: 75px;
          .des{
            padding: 0;
            margin-top: 13px;
          }
        }
        
      }

      .card-top{
        align-items: center;
        justify-content: center;

        img{
          width: 38px;height: 38px;
        }
        .tit{
         
          font-weight: 600;
          font-size: 18px;
          color: #323C5A;
          margin-left: 10px;
        
        }
      }
      
    }
    
  }

}

.card {
  padding: 18px;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;

  .select {
    margin-left: 15px;
    > div {
      border: 1px solid #ccc;
      border-right: none;
      padding: 3px 20px;
      cursor: pointer;
      color: #4E5969;
      font-size: 14px;
      &:last-child {
        border-right: 1px solid #D8DCE6;
        border-radius: 0 3px 3px 0;
      }
      &:first-child {
        border-radius: 3px 0 0 3px;
      }
      &.active {
        border-color: #6C5DD3;
        background: #6C5DD3;
        color: #fff;
      }
    }
  }
}

.tongji{
  width: 1272px;
  position: relative;
  z-index: 999;
  >div{
    width: 50%;
    &:nth-of-type(2){
      margin-left: 20px;
    }
  }

}

.youzhi-list{
  width: 1272px;
  .btnicon{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../../../assets/img/youzhishangjia/shenqing.png');
    background-size: 100% 100%;
    vertical-align: middle;
    margin-right:8px;
    
    
    &.gouxuan{
      background-image: url('../../../assets/img/youzhishangjia/gouxuan.png');

    }
  }
}


.lunbo_box {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    padding: 10px 15px;
    padding-right: 0;
    

    
    .youzhi_box {
      flex-wrap: wrap;
      margin-top: 20px;
      .item {
        height: 54px;
        box-sizing: border-box;
        width: calc(20% - 7px);
        padding-left: 70px;
        // height: 74px;
        margin-right: 6px;
        margin-bottom: 32px;
        // text-align: center;
        // flex-wrap: nowrap;
        // overflow: hidden;
        border-radius: 27px;
        position: relative;
        // .sign{
        //   width: 20px;
        //   height: 27px;
        //   background-image: url('../../../assets/img/youzhishangjia/tongpai.png');
        //   background-size: 100% 100%;
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        // }
      }
      .touxiang {
        width: 56px;
        height: 56px;
        background: #ffffff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        top: -20px;
        left: 10px;
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin: 0 auto;
          margin-top: 4px;
        }
      }
      // .rg {
      //   width: calc(100% - 50px);
      //   margin-left: 5px;
      // }
      .name {
        color: #5f75ee;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 54px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
</style>
